<template>
  <div class="box">
    <div class="logo">
      <p>Welcome</p>
    </div>
    <div class="login-box">
      <div class="login-info">
        <div class="input-container">
          <input class="el-input_inner" v-model="username" placeholder="用户名" />
          <input class="el-input_inner" v-model="password" placeholder="密码" />
        </div>
        <div class="message-container">
          <a>忘记密码</a>
          <router-link to="/sign-up"><a>点击注册</a></router-link>

        </div>
      </div>
      <button class="login-button" @click="login()"><span>登录</span></button>
    </div>
    <div class="other-login">
      <svg class="svg-login" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="40" height="40" style="fill: rgba(0, 154, 255, 0.7);border-color: rgba(187,187,187,1);border-width: 0px;border-style: solid" filter="none"><path d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"></path></svg>
      <svg class="svg-login" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="40" height="40" style="fill: rgba(0, 154, 255, 0.7);border-color: rgba(187,187,187,1);border-width: 0px;border-style: solid" filter="none"><path d="M433.754 420.445c-11.526 1.393-44.86-52.741-44.86-52.741 0 31.345-16.136 72.247-51.051 101.786 16.842 5.192 54.843 19.167 45.803 34.421-7.316 12.343-125.51 7.881-159.632 4.037-34.122 3.844-152.316 8.306-159.632-4.037-9.045-15.25 28.918-29.214 45.783-34.415-34.92-29.539-51.059-70.445-51.059-101.792 0 0-33.334 54.134-44.859 52.741-5.37-.65-12.424-29.644 9.347-99.704 10.261-33.024 21.995-60.478 40.144-105.779C60.683 98.063 108.982.006 224 0c113.737.006 163.156 96.133 160.264 214.963 18.118 45.223 29.912 72.85 40.144 105.778 21.768 70.06 14.716 99.053 9.346 99.704z"></path></svg>
      <svg class="svg-login" xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="40" height="40" style="fill: rgba(0, 154, 255, 0.7);border-color: rgba(187,187,187,1);border-width: 0px;border-style: solid" filter="none"><path d="M308.6 545.7c-19.8 2-57.1 10.7-77.4 28.6-61 53-24.5 150 99 150 71.8 0 143.5-45.7 199.8-119-80.2-38.9-148.1-66.8-221.4-59.6zm460.5 67c100.1 33.4 154.7 43 166.7 44.8A445.9 445.9 0 0 0 960 512c0-247.4-200.6-448-448-448S64 264.6 64 512s200.6 448 448 448c155.9 0 293.2-79.7 373.5-200.5-75.6-29.8-213.6-85-286.8-120.1-69.9 85.7-160.1 137.8-253.7 137.8-158.4 0-212.1-138.1-137.2-229 16.3-19.8 44.2-38.7 87.3-49.4 67.5-16.5 175 10.3 275.7 43.4 18.1-33.3 33.4-69.9 44.7-108.9H305.1V402h160v-56.2H271.3v-31.3h193.8v-80.1s0-13.5 13.7-13.5H557v93.6h191.7v31.3H557.1V402h156.4c-15 61.1-37.7 117.4-66.2 166.8 47.5 17.1 90.1 33.3 121.8 43.9z"></path></svg>
      <svg class="svg-login" xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" width="40" height="40" style="fill: rgba(0, 154, 255, 0.7);border-color: rgba(187,187,187,1);border-width: 0px;border-style: solid" filter="none"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zM315.7 291.5c27.3 0 49.5 22.1 49.5 49.4s-22.1 49.4-49.5 49.4a49.4 49.4 0 1 1 0-98.8zM366.9 578c-13.6 42.3-10.2 26.7-64.4 144.5l-78.5-49s87.7-79.8 105.6-116.2c19.2-38.4-21.1-58.9-21.1-58.9l-60.2-37.5 32.7-50.2c45.4 33.7 48.7 36.6 79.2 67.2 23.8 23.9 20.7 56.8 6.7 100.1zm427.2 55c-15.3 143.8-202.4 90.3-202.4 90.3l10.2-41.1 43.3 9.3c80 5 72.3-64.9 72.3-64.9V423c.6-77.3-72.6-85.4-204.2-38.3l30.6 8.3c-2.5 9-12.5 23.2-25.2 38.6h176v35.6h-99.1v44.5h98.7v35.7h-98.7V622c14.9-4.8 28.6-11.5 40.5-20.5l-8.7-32.5 46.5-14.4 38.8 94.9-57.3 23.9-10.2-37.8c-25.6 19.5-78.8 48-171.8 45.4-99.2 2.6-73.7-112-73.7-112l2.5-1.3H472c-.5 14.7-6.6 38.7 1.7 51.8 6.8 10.8 24.2 12.6 35.3 13.1 1.3.1 2.6.1 3.9.1v-85.3h-101v-35.7h101v-44.5H487c-22.7 24.1-43.5 44.1-43.5 44.1l-30.6-26.7c21.7-22.9 43.3-59.1 56.8-83.2-10.9 4.4-22 9.2-33.6 14.2-11.2 14.3-24.2 29-38.7 43.5.5.8-50-28.4-50-28.4 52.2-44.4 81.4-139.9 81.4-139.9l72.5 20.4s-5.9 14-18.4 35.6c290.3-82.3 307.4 50.5 307.4 50.5s19.1 91.8 3.8 235.7z"></path></svg>

    </div>

  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
import { getCurrentInstance } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import cookieUtil from '../utils/cookiesUtil.js'

export default {
  name: "login",
  setup(){
    const instance = getCurrentInstance();
    const ctx = instance.appContext.config.globalProperties;

    let username = ref("");
    let password = ref("");
    let router = useRouter();

    function login(){
      ctx.$http.post('/user/login',{
        username:this.username,
        password:this.password,
      })
      .then((res)=>{
        if(res.code == '201'){
          ElMessage('用户名或密码错误')
        }
        else{
          cookieUtil.setCookie('token',res.msg)
          router.push('/main')
        }
        
      })
      .catch(()=>{
        ElMessage('服务器错误')
      })
    }

    return{
      username,
      password,
      login,
      router
    }
  },
  created(){
    let token = cookieUtil.getCookie("token");
    if(token!=null){
      this.router.push("/main")
    }
  }
}
</script>

<style scoped>
.box {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)), url(../assets/blue.jpg), no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
}
.logo{
  height: 15%;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  color: white;
  font-family: Bahnschrift;
  font-size: 50px;
  text-align: center;
}
.login-box{
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.7);/*设置半透明*/
  box-shadow: 1px 5px 15px #c0c0c0;
  margin: 10px auto;
  height: 50%;
  width: 85%;
  border-radius: 6px;
}
.login-info{
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.el-input_inner{
  width: 220px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 1px;
}
.input-container {
  padding: 20px 0;
}
.input-container input {
  border: 0;
  background: none;
  outline: 0;
  color: #003bb9;
  margin: 25px 0;
  display: block;
  width: 100%;
  padding: 5px 0;
  transition: .2s;
  border-bottom: 1px solid rgb(20, 111, 231);
}

.input-container input:hover {
  border-bottom-color: #87b5fc;
}

::-webkit-input-placeholder {
  color: rgb(121, 175, 238);
}

.message-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  transition: .2s;
  color: #87b5fc;
  cursor: pointer;
}

.message-container:hover {
  color: rgb(135, 180, 232);
}

.login-button{
  background-color: #0081ff;
  color: #ffffff;
  margin: 10px auto;
  height: 10%;
  width: 30%;
  border: none;
  border-radius: 50px;
}
.login-button:hover{
  background-color: rgb(135, 180, 232);
}

.other-login{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.svg-login{
  margin: 20px 10px 10px 10px;
}
</style>
